<template>
  <div class="shop">
    <!--头部样式-->
    <NavBar>
      <van-icon slot="left" name="wap-home-o" @click="goIndex"/>
      <div slot="title" class="van-nav-bar__title van-ellipsis">店铺</div>
      <div slot="right" class="van-nav-bar__text" @click="onClickRight">
        <img class="handImg" :src="handImg">
        <span class="van-nav-bar__text van-ellipsis" style="max-width: 50px;">{{nickname}}</span>
      </div>
    </NavBar>

    <!--搜索-->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @click="onSearch"
    >
    </van-search>
    <shopdp></shopdp>
  </div>
</template>

<script>
import NavBar from '@/components/navbar'
import shopdp from './components/dp'
import commonjs from '@/common/commonUtils.js'
import headImg from '../../assets/img/hand.png'
export default {
  name: 'shop',
  components: {
    NavBar,
    shopdp
  },
  data () {
    return {
      value: '',
      handImg: headImg,
      nickname: '昵称'
    }
  },
  created () {
    let isWchat = commonjs.is_wexin()
    if (isWchat) {
      let wechat = JSON.parse(commonjs.getStorage('wechat'))
      if (wechat !== null) { // 判断是否微信授权登录
        this.handImg = wechat.wechatImgUrl
        this.nickname = wechat.wechatName
      }
    }
  },
  methods: {
    goIndex () {
      this.$router.push('/')
    },
    onClickRight () {
      this.$toast('按钮')
    },
    onSearch () {
      this.$router.push('./search')
    }
  }
}
</script>

<style scoped>
  .van-nav-bar__title {
    font-weight: bold;
    font-size: 20px;
  }
  .van-search {
    margin-top: 46px;
    padding: 5px 5px;
  }
  .van-nav-bar__text:active {
    background-color: #eff7fa;
  }
  .handImg {
    width: 30px;
    position: relative;
    top: 8px;
    border-radius: 50%;
  }
  .product {
    font-size: 16px;
    line-height: 50px;
    background: #fff;
    margin-top: 5px;
    margin-bottom: 1px;
  }
  .van-grid-item {
    border: 1px solid #f3f3f3;
  }
  .choose_type {
    width: 100%;
    height: 100px;
    margin-top: 1px;
    background-color: #fff;
  }
  .type {
    margin-top: 5%;
    width: 25%;
    float: left;
  }
  .type_img {
    width: 40%;
  }
  .shop {
    padding-bottom: 50px;
  }
</style>
